<script>
    Page({
        launchAppError: function(e) {
            console.log(e.detail.errMsg)
        }
    })
    const app = getApp()
    var QQMapWX = require('../../lib/qqmap-wx-jssdk')
    var qqmapsdk = new QQMapWX({
        // key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
        key: 'E36BZ-62ZRI-2HPGV-USGNE-NRQB5-EHBE2'
    })
    export default {
        data() {
            return {
                longitude: 0,
                latitude: 0,
                currentAddress: '',
                markers: [],
                newAdd: {

                }
            };
        },
        methods: {
            //选择其他地点
            chooseAddress() {
                var that = this
                uni.chooseLocation({
                    success: function(res) {
                        that.newAdd = {
                            longitude: res.longitude,
                            latitude: res.latitude,
                            address: res.address,
                            name: res.name
                        }
                        console.log(res);
                        that.currentAddress = res.address
                        that.markers[0].callout.content = res.address
                    }
                })
            },

            // 导航
            toOther() {
                var that = this
                // uni.request({
                //     url: `https://apis.map.qq.com/ws/direction/v1/walking/?from=${that.latitude},${that.longitude}&to=${that.newAdd.latitude},${that.newAdd.longitude}&key=E36BZ-62ZRI-2HPGV-USGNE-NRQB5-EHBE2`,
                //     success(res) {
                //         console.log(res)
                //     }
                // })
                uni.getLocation({
                    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
                    success: function(res) {
                        const latitude = res.latitude;
                        const longitude = res.longitude;
                        uni.openLocation({
                            latitude: that.newAdd.latitude,
                            longitude: that.newAdd.longitude,
                            name: that.newAdd.name,

                            address: that.newAdd.address,
                            success: function() {
                                console.log('success');
                            }
                        });
                    }
                });

            }
        },
        onLoad() {
            var that = this
            uni.getLocation({
                type: 'gcj02',
                success(res) {
                    // console.log(res);
                    that.longitude = res.longitude
                    that.latitude = res.latitude
                    uni.request({
                        url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${that.latitude},${that.longitude}&key=E36BZ-62ZRI-2HPGV-USGNE-NRQB5-EHBE2`,
                        success(result) {
                            // console.log(result.data.result);
                            that.currentAddress = result.data.result.address
                            that.markers.push({
                                longitude: res.longitude,
                                latitude: res.latitude,
                                id: 111,
                                iconPath: 'https://s2.ax1x.com/2020/03/10/8CvKmt.png',
                                height: '60rpx',
                                width: '50rpx',
                                label: {
                                    content: that.currentAddress,
                                    color: '#ff557f', //文本颜色
                                    borderRadius: 3, //边框圆角
                                    borderWidth: 1, //边框宽度
                                    borderColor: '#FF0202', //边框颜色
                                    bgColor: '#ffffff', //背景色
                                    padding: 5, //文本边缘留白
                                    textAlign: 'center' //文本对齐方式。有效值: left, right, center
                                },
                                callout: {
                                    content: that.currentAddress,
                                    color: '#000000', //文本颜色
                                    borderRadius: 3, //边框圆角
                                    borderWidth: 1, //边框宽度
                                    borderColor: '#FF0202', //边框颜色
                                    bgColor: '#ffffff', //背景色
                                    padding: 5, //文本边缘留白
                                    textAlign: 'center', //文本对齐方式。有效值: left, right, center
                                    display: 'BYCLICK',
                                    anchorX: 0,
                                    anchorY: 0
                                }

                            })
                        }
                    })

                }
            })
        }
    }
</script>

<template>
    <view class="newmap-main">
        <view class="map-view">
            <map style="width: 750rpx;height: 1100rpx;" :markers="markers" :longitude="longitude"
                :latitude="latitude"></map>
        </view>
        <view class="current-address" @tap="chooseAddress">{{currentAddress}}</view>

        <img style="width: 60rpx;height: 40rpx;" src="https://s2.ax1x.com/2020/03/10/8CvKmt.png" @click="toOther">
    </view>
</template>


<style lang="scss" scoped></style>